<template>
  <div>
    <br /><br>
    <center>
      <div>
        <el-form :inline="true" ref="queryCondition" :model="queryCondition">
          <el-form-item label="照片名称">
            <el-input
              v-model="queryCondition.name"
              placeholder="照片名称"
              @keydown.enter.native="search"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属相册">
            <el-select
              v-model="queryCondition.albumId"
              placeholder="所属相册"
              filterable
              class="custom-select"
            >
              <el-option
                v-for="item in albumList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="是否展示">
            <el-select v-model="queryCondition.status" placeholder="是否展示">
              <el-option label="展示" value="1"></el-option>
              <el-option label="不展示" value="0"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()" style="margin-left: 100px"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh-right" @click="resetForm()"
              >重置</el-button
            >
            <el-button type="danger" @click="delByIds()" icon="el-icon-delete"
              >批量删除</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </center>
    <br />
    <center>
      <div>
        <el-table
          :data="photosList"
          stripe
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="albumName"
            label="所属相册"
            width="270"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="照片名字"
            width="320"
            align="center"
          >
            <template slot-scope="scope">
              <span
                style="color: rgb(0, 180, 255); cursor: pointer"
                @mouseover="showThumbnail(scope.row.url)"
                @mouseleave="hideThumbnail"
              >
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="weight" width="170" align="center">
            <template slot="header">
              <div>
                <span>照片权重</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="权重越大,照片位置越靠前"
                  placement="top"
                >
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="uploadTime"
            label="上传时间"
            width="240"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column label="是否展示" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "是" : "否" }}
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="270" align="center">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="updateStatus(scope.row.id, scope.row.status)"
                :type="scope.row.status == 1 ? 'info' : 'success'"
              >
                {{ scope.row.status == 1 ? "不展示" : "展示" }}
              </el-button> -->
              <el-button
                size="mini"
                @click="handleEdit(scope.row.id)"
                type="primary"
                plain
                >修改权重</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="delById(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </center>
    <center>
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </center>
    <div>
      <el-dialog
        class="photos-dialog"
        :title="title"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        width="25%"
        top="250px"
      >
        <el-form ref="form" :model="photos" label-width="80px">
          <el-form-item label="照片权重">
            <el-input
              v-model="photos.weight"
              placeholder="数字越大,展示的时候越靠前"
              style="width: 250px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -20px">
          <el-button @click="dialogFormVisible = false" icon="el-icon-close"
            >取 消</el-button
          >
          <el-button type="primary" @click="update()" icon="el-icon-check"
            >提 交</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 照片缩略图 -->
    <div
      v-if="hoveredPhotoUrl"
      style="position: absolute; top: 150px; left: 950px; z-index: 9999"
    >
      <img
        :src="hoveredPhotoUrl"
        style="max-width: 500px; max-height: 500px; width: auto; height: auto"
      />
    </div>
  </div>
</template>
  
<script>
import { albumApi, themeApi, photosApi } from "@/api/api";
export default {
  data() {
    return {
      //当前页数
      currentPage: 1,
      //每页显示多少条
      pageSize: 10,
      //总计条数
      totalCount: 0,
      //表的数据
      photosList: [],
      //查询的数据表单
      queryCondition: {
        name: "",
        albumId: "",
        status: "",
      },
      //控制是否显示表单弹框
      dialogFormVisible: false,
      //主题列表
      albumList: [],
      //添加和修改的表单数据
      photos: {
        weight: "",
      },
      //选择的id
      ids: [],
      //表单标题
      title: "",
      // 缩略图url
      hoveredPhotoUrl: null,
    };
  },
  methods: {
    //  显示照片缩略图
    showThumbnail(url) {
      this.hoveredPhotoUrl = url;
    },
    // 隐藏照片缩略图
    hideThumbnail() {
      this.hoveredPhotoUrl = null;
    },
    //点击封面名字弹窗照片
    ShowpreviewPic(url, name) {
      this.coverName = name;
      this.previewpic = url;
      this.lookdialogVisible = true;
    },
    //重置查询表单
    resetForm() {
      this.queryCondition.name = "";
      this.queryCondition.themeId = "";
      this.queryCondition.status = "";
      this.queryPage();
    },
    //点击页码切换分页数据
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryPage();
    },
    //点击搜索按钮
    search() {
      this.currentPage = 1;
      this.queryPage();
    },
    //单个删除
    delById(id) {
      this.ids = [];
      this.ids[0] = id;
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          photosApi.deleteByIds(this.ids).then((resp) => {
            if (resp.data.code) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.queryPage();
            } else {
              this.$message({
                type: "info",
                message: resp.data.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    delByIds() {
      console.log(this.ids.length);
      if (this.ids.length == 0) {
        this.$message({
          type: "info",
          message: "请选择一条或多条",
        });
      } else {
        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            photosApi.deleteByIds(this.ids).then((resp) => {
              if (resp.data.code) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.queryPage();
              } else {
                this.$message({
                  type: "info",
                  message: resp.data.msg,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //条件查询
    queryPage() {
      photosApi
        .queryPage(this.currentPage, this.pageSize, this.queryCondition)
        .then((resp) => {
          if (resp.data.code) {
            this.photosList = resp.data.data.records;
            this.totalCount = resp.data.data.total;
          } else {
            this.$message({
              type: "info",
              message: resp.data.msg,
            });
          }
        });
    },
    //查询相册
    queryAlbum() {
      albumApi.queryAll().then((resp) => {
        if (resp.data.code) {
          this.albumList = resp.data.data;
        } else {
          this.$message({
            type: "info",
            message: resp.data.msg,
          });
        }
      });
    },
    //点击修改权重逻辑
    handleEdit(id) {
      this.opendialog();
      photosApi.queryById(id).then((resp) => {
        if (resp.data.code) {
          this.photos = resp.data.data;
        } else {
          this.$message({
            type: "info",
            message: resp.data.msg,
          });
        }
      });
    },
    update() {
      photosApi.updatePhotos(this.photos).then((resp) => {
        if (resp.data.code) {
          this.$message({
            type: "success",
            message: "调整权重成功",
          });
          //关闭弹框
          this.dialogFormVisible = false;
          this.queryPage();
        } else {
          this.$message({
            type: "info",
            message: resp.data.msg,
          });
        }
      });
    },
    //修改权重弹窗
    opendialog() {
      this.title = "修改照片权重";
      //打开表单
      this.dialogFormVisible = true;
    },
    handleSelectionChange(val) {
      this.ids = [];
      for (let i = 0; i < val.length; i++) {
        this.ids[i] = val[i].id;
      }
    },
  },
  mounted() {
    this.queryPage();
    this.queryAlbum();
  },
};
</script>
  
  <style>
.page {
  margin-top: 20px;
}

.el-table td,
.el-table th {
  user-select: none;
}
.custom-select .el-input__suffix {
  cursor: pointer;
}
.custom-select .el-input__inner {
  cursor: text;
}
</style>